<template>
    <view class="tabList">
        <block v-for="(item,index) in tabs" :key="index">
            <text :class="{blue:activeCode==item.id}" @click="changeTab(item.id)">{{item.name}}</text>
        </block>
        
    </view>
</template>

<script>
export default {
    /*
    *  tabs Array 导航列表，{id:1} 
    *  ynFilter Boolen
    * */
    /**
     * tabList tab导航切换
     * @description 导航切换，可以自定义是否筛选
     * @property {Array} tabs 导航列表，已id为操作关键词
     * @property {Boolean} ynFilter 是否显示筛选按钮
     * @event {Function} changeTab 头部切换tab搜索
     * @event {Function} filter 筛选按钮点击 `ynFilter :true` 时生效
     * @example <tab-list :tabs="tabs" @changeTab="changeTab" :ynFilter="true" @filter="show=true"/>
     */
        
    props:['tabs','ynFilter'],
    data(){
        return{
            activeCode:''
        }
    },
    methods:{
        // 头部切换tab搜索
		changeTab(id){
            this.activeCode = id
            this.$emit('changeTab',id)
		},
        filter(){
            this.$emit('filter')
        }
        
    }
}
</script>

<style lang="scss" scoped>
.tabList{
	display: flex;
	align-items: center;
	position: fixed;
	z-index: 10;
	width: 100%;
	background: #fff;
	height: 80rpx;
	top: 0;
    /* #ifdef H5 */
    top: var(--window-top);
    /* #endif */
	border-top: 1rpx solid #eee;
	padding-right: 30rpx;
	justify-content: space-between;
	box-shadow: 0 4rpx 10rpx rgba(106, 133, 158, 0.3);
	text{
		position: relative;
        flex: 1;
        text-align: center;
	}
	.blue::after{
		content: '';
		width: 30rpx;
		height: 4rpx;
		background: #0049fe;
		position: absolute;
		bottom: -8rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.filter{
		width: 36rpx;
		height: 36rpx;
        margin-left: 26rpx;
	}
}

</style>